<template>
  <div class="container text-center">
    <div class="row">
      <div class="col">
        数据： 加载 {{ data.length }} 项，快照时间 {{ formatDate(create) }}。播放器：
        <a href="https://github.com/ipfs-app/ipfs-player/releases" target="_blank">{{ player.version }}</a>
        。
      </div>
    </div>
    <div class="row">
      <div class="col">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">title</th>
            <th scope="col">tags</th>
            <th scope="col">player</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in data">
            <th scope="row">{{ item.id }}</th>
            <td>{{ item.title }}</td>
            <td>{{ item.tags }}</td>
            <td>
              <a target="_blank" :href="gateway+player.xgplayer+'/#files.json='+item.filesHash">xgplayer</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script setup>
import Axios from 'axios'
import {ref, onMounted} from 'vue'

const data = ref([])
const create = ref(0)
const player = ref({})
const gateway = ref("")
onMounted(() => {
  Axios.get('data/data.json').then((res) => {
    data.value = res.data.data
    create.value = res.data.createTime
  })
  Axios.get('config.json').then((res) => {
    player.value = res.data.player
    gateway.value = res.data.gateway
  })
})

function formatDate (value) {
		let date = new Date(value*1000);
		let y = date.getFullYear();
		let MM = date.getMonth() + 1;
		MM = MM < 10 ? ('0' + MM) : MM;
		let d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		let h = date.getHours();
		h = h < 10 ? ('0' + h) : h;
		let m = date.getMinutes();
		m = m < 10 ? ('0' + m) : m;
		let s = date.getSeconds();
		s = s < 10 ? ('0' + s) : s;
		return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
	}
</script>
<style scoped>

</style>
